<template>
	<view class="add-container">
		<view class="add-card">
			<textarea class="add-textarea" v-model="content" placeholder="分享新鲜事" maxlength="300" />
			<view class="divider"></view>
			<view class="img-upload-row">
				<view class="img-upload" @click="chooseImage">
					<view class="plus-box" v-if="images.length < 9">
						<text class="plus">+</text>
					</view>
					<image v-for="(img, idx) in images" :key="idx" :src="img" class="img-thumb" mode="aspectFill" />
				</view>
				<text class="img-count">{{ images.length }}/9</text>
			</view>
			<view class="divider"></view>
			<view class="tag-list">
				<view v-for="(tag, idx) in tags" :key="idx" :class="['tag', selectedTags.includes(tag) ? 'active' : '']" @click="toggleTag(tag)">
					#{{ tag }}
				</view>
			</view>
		</view>
		<button class="send-btn" @click="sendPost">发送</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '',
				images: [],
				tags: [],
				selectedTags: []
			}
		},
		methods: {
			chooseImage() {
				if (this.images.length >= 9) {
          uni.showToast({
            title: '最多只能上传9张图片',
            icon: 'none'
          })
        }
        let that = this
        uni.chooseImage({
          count: 1, //默认9
          sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
          sourceType: ['album'], //从相册选择
          success: function(res) {
            uni.showLoading({
              title: '上传中...'
            })
            uni.uploadFile({
              url: that.$api.uploadImage, //仅为示例,非真实的接口地址
              filePath: res.tempFilePaths[0],
              name: 'file',
              success: (uploadFileRes) => {
                let data = JSON.parse(uploadFileRes.data)
                that.images.push(data.data.url)
              },
              complete: () => {
                uni.hideLoading()
              }
            })
          }
        });

			},
			toggleTag(tag) {
				const idx = this.selectedTags.indexOf(tag);
				if (idx > -1) {
					this.selectedTags.splice(idx, 1);
				} else {
					this.selectedTags.push(tag);
				}
			},
			sendPost() {
				// 发送逻辑
        uni.showLoading({ title: '发布中...' })
        this.$api.addPost({
          content: this.content,
          images: this.images.join(','),
          user_id:this.userInfo.id
        }).then(res => {
          uni.showToast({ title: '发布成功，等待后台审核', icon:'none' });
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            })
          },500)
        })
			}
		}
	}
</script>

<style lang="scss">
	.add-container {
		min-height: 100vh;
		background: #f8f9fa;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding-bottom: 48rpx;
	}
	.add-card {
		background: #fff;
		border-radius: 24rpx;
		margin: 32rpx 24rpx 0 24rpx;
		padding: 32rpx 24rpx 24rpx 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.03);
	}
	.add-textarea {
		width: 100%;
		min-height: 120rpx;
		font-size: 32rpx;
		color: #888;
		border: none;
		background: transparent;
		resize: none;
	}
	.divider {
		height: 2rpx;
		background: #e5e6eb;
		margin: 24rpx 0;
	}
	.img-upload-row {
		display: flex;
		align-items: center;
		margin-bottom: 12rpx;
	}
	.img-upload {
		display: flex;
		align-items: center;
	}
	.plus-box {
		width: 120rpx;
		height: 120rpx;
		background: #fff5d1;
		border: 4rpx solid #333;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
	}
	.plus {
		color: #4e8ef7;
		font-size: 64rpx;
		font-weight: bold;
	}
	.img-thumb {
		width: 120rpx;
		height: 120rpx;
		border-radius: 12rpx;
		object-fit: cover;
		margin-right: 12rpx;
		border: 2rpx solid #eee;
	}
	.img-count {
		margin-left: 16rpx;
		color: #888;
		font-size: 28rpx;
	}
	.tag-list {
		display: flex;
		flex-wrap: wrap;
		margin-top: 12rpx;
	}
	.tag {
		background: #f2f3f5;
		color: #888;
		border-radius: 12rpx;
		padding: 8rpx 28rpx;
		font-size: 28rpx;
		margin-right: 16rpx;
		margin-bottom: 12rpx;
	}
	.tag.active {
		background: #3478f6;
		color: #fff;
	}
	.send-btn {
		width: 90%;
		margin: 48rpx auto 0 auto;
		height: 88rpx;
		background: #4e8ef7;
		color: #fff;
		font-size: 36rpx;
		border-radius: 24rpx;
		display: block;
		letter-spacing: 8rpx;
	}
</style>
